<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
  <head>
    <title>个人中心</title>
    <meta name="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
   <script type="text/javascript">
  </script>            
  </head>  
  <body>
    <jsp:include page="/head"></jsp:include>
	  <div class="panel panel-info" style="width: 1000px;margin-left: 200px;margin-top:52px;height: 500px">
         <div class="panel-heading"  style="height: 50px">
           <h2 class="panel-title pull-left" style="margin-top: 10px">个人中心</h2>
           <div class="pull-right">
		    <!--   <button class="btn  btn-primary" type="button" id="login_btn" onclick="update()">修改个人信息</button> -->
		      <a class="btn  btn-primary" href="<c:url value="/update"/>">个人信息</a>
           </div>
         </div>
        <div class="panel-body">
             <table class="table table-responsive">
             <thead>
			      <tr>
			         <th width="100x"></th>
			         <th width="600px"></th>
			      </tr>
			   </thead>
			   <tbody>
			      <tr>
			         <td  >
					   <div style=" width:200px height:140px" >
					    <c:if test="${not empty sessionScope.user.img }">
								<img src="${sessionScope.user.img }" width="100" height="100">
								</c:if>
								<c:if test="${ empty sessionScope.user.img }">
								<img src="${path }/static/images/weishch.png" width="100" height="100"></c:if>
					   </div>
					   <h4 id="nickname" >昵称： ${user.nickname}</h4>
					</td>
			         <td id="content" colspan="1" rowspan="1">
					  <form id="form_id" action="${path }/personal/up" method="post"> 
					    <h4  style="margin-left: 20px">
						  
						   <ul>
							  <li id="username" style="margin-top: 10px">姓名：${sessionScope.user.username }</li>
							  <li id="nickname" style="margin-top: 10px">昵称：<input type="text" id="nick_name" name="nickname" value="${sessionScope.user.nickname }" maxlength="10"/><span id="nick_info"></span></li>
							  <li id="email" style="margin-top: 10px">邮箱：<input type="email" name="email" id="emailbt" value="${sessionScope.user.email }"/><span id="email_info"></span>
							  	 <c:if test="${sessionScope.user.status==0 }">
							  		<a href="javascript:void(0)" class="btn  btn-primary" style="margin-left: 20px" onclick="jh()" id="jh_bt">激活</a>
							  	</c:if> 
							  </li> 							     
							</ul>
							<span style="color:red">${msg}</span>
							<button  class="btn  btn-primary" style="margin-left: 20px;margin-top: 20px" type="submit" >确认修改</button>                       
						
						</h4>
						</form>
					 </td>      
			      </tr>
			      <tr>
			      <td>
			       <ul>
							<h4>  <a id="username" style="margin-top: 10px" href="${path }/personal/resetpassword">修改密码</a></h4> </ul>
							<ul> <h4><a id="nickname" style="margin-top: 10px" href="${path }/personal/upload">上传头像</a></h4></ul> 
							 <ul><h4> <a id="email" style="margin-top: 10px" href="${path }/personal/mypost">贴子管理</a></h4></ul>
							  
							  </td>
			      </tr>
			   </tbody>
			</table>
       </div>
	 </div>
  <script type="text/javascript">
  $(document).ready(function(){
	  var ncikval=true;
	  var emailval=true;
	  $("#nick_name").blur(function(){
		  var nickname= $("#nick_name").val();
		
		  if (!nickname) {
			  $("#nick_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">昵称不能为空</span>');
		}else{
			if (nickname=="${sessionScope.user.nickname}") {
				ncikval=true;
				$("#nick_info").hide();
			}else{
			 /* JQuery 设置请求为同步 */
			$.ajaxSetup({async: false});
			/* JQuery 发起get请求 */
			$.get("${path}/personal/isNickNameexsit",{nickname:nickname},function(data,status){
				//得到返回数据
				var dataObj = eval(data);
				var flag = dataObj.flag;
				//alert("flag="+flag);
				if (flag==0) {
					
					ncikval=true;
					$("#nick_info").hide();
				}else{
					ncikval=false;
					 $("#nick_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;">昵称已经存在</span>');
				}
			});	
			}
		}
		
	  });
	 /*  $("#emailbt").blur(function(){
		  var
	  }); */
	  $("#emailbt").blur(function(){
			var val = $(this).val();			
			var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
			var html="";
 			 /* JQuery 设置请求为同步 */
 			if (!val) {
 				html='<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 不能为空</span>';
 				/* $("#email_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 不能为空</span>'); */
			}else{
			 if(!reg.test(val)){
				 html='<span class="glyphicon glyphicon-remove"></span><span style="color: red;">  邮箱格式错误</span>';
				/* $("#email_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 邮箱格式错误</span>'); */
				emailValidate = false;
			}else {
				if (val=="${sessionScope.user.email}") {
					emailValidate = true;
					$("#email_info").hide();
				}else{
				$.ajaxSetup({async: false});
	 			/* JQuery 发起get请求 */
	 			$.get("${path}/personal/isEmailExist",{email:val},function(data,status){
	 				if(data.flag == 0){
	 					emailValidate = true;
	 					$("#email_info").hide();	 					
	 				}else{
	 					emailValidate = false;
	 					html= '<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 邮箱已被使用</span>';
	 				/* 	$("#email_info").html('<span class="glyphicon glyphicon-remove"></span><span style="color: red;"> 邮箱已被使用</span>'); */
	 				}
	 			});				
			}
				}
			}
 			 if (html!="") {
 				 $("#jh_bt").hide();
 				$("#email_info").html(html); 
 				
			}
 			/* $("#email_info").html(html);  */
		});
	  $("#form_id").submit(function(){
		
		  return ncikval&&emailval;
	  });
  });
  function jh(){
 $
		.ajax({
			url : "${path}/personal/jh",
			cache : false,
			type : "post",
			dataType : 'json',			
			success : function(da) {			
				if (da=='2') {
					 $("#jh_bt").hide();
					$("##email_info").html("<span style='color:red'>激活邮件已经发送到你的邮箱，请注意查收</span>");
				}else{		
					 $("#email_info").html("<span style='color:red'>系统繁忙！</span>");
				}
				
				
			}
		});
  }
  </script>	
  </body>
</html>
